/* App界面使用的组件 */
<template>
    <tabbar>  
      <tabbar-item path="/home"> 
         <template v-slot:item-icon>
          <img  src="@assets/img/tabbar/home.svg" alt="">              
         </template>
         <template v-slot:item-icon-active>
          <img src="@assets/img/tabbar/home_active.svg" alt="">
         </template>     
         <template v-slot:item-text>
          <div>首页</div>
         </template>  
      </tabbar-item>
      <tabbar-item path="/category">
         <template v-slot:item-icon>
          <img  src="@assets/img/tabbar/category.svg" alt="">              
         </template>
         <template v-slot:item-icon-active>
          <img src="@assets/img/tabbar/category_active.svg" alt="">
         </template>     
         <template v-slot:item-text>
          <div>分类</div>
         </template> 
      </tabbar-item>
      <tabbar-item path="/cart">
          <template v-slot:item-icon>
          <img  src="@assets/img/tabbar/cart.svg" alt="">              
         </template>
         <template v-slot:item-icon-active>
          <img src="@assets/img/tabbar/cart_active.svg" alt="">
         </template>     
         <template v-slot:item-text>
          <div>商城</div>
         </template> 
      </tabbar-item>
      <tabbar-item path="/profile" activeColor="cyan">
          <template v-slot:item-icon>
          <img  src="@assets/img/tabbar/profile.svg" alt="">              
         </template>
         <template v-slot:item-icon-active>
          <img src="@assets/img/tabbar/profile_active.svg" alt="">
         </template>     
         <template v-slot:item-text>
          <div>我的</div>
         </template> 
      </tabbar-item>
    </tabbar> 
</template>

<script>
  import Tabbar from '@components/common/tabbar/Tabbar'
  import TabbarItem from '@components/common/tabbar/TabbarItem'

export default {
  name:"MainTabBar",
  components:{
    Tabbar,
    TabbarItem
  }
}
</script>


<style>
 /*  @import url('assets/css/base.css'); */ /* 引用公共资源里的东西 */

 
  .tab-bar-item img{
    width: 24px;
    height: 24px;
    margin-top: 3px;
    vertical-align: middle;
    margin-bottom: 3px;
  }
 
</style>
